<template>
	<view class="waterfall">
		<view class="item" v-for="(item) in goods" :key="item.goods_id" @click="handleGoodsDetail(item)">
			<image v-if="item.new_grade == 95" class="new" src="@/static/index/95.png"></image>
			<image v-else-if="item.new_grade == 99" class="new" src="@/static/index/99.png"></image>
			<image v-else class="new" src="@/static/index/new.png"></image>
			<image class="img" :src="getImg(item.imgurl)" :lazy-load="true" mode="widthFix"></image>
			<view class="activity" :class="{active:!item.activity_title}">
				<view class="line">
					<view class="daily">限时活动</view>
					<view class="discount">
						{{item.activity_title}}
					</view>
				</view>
				<view class="current">
					<view class="current-title">卷后到手价</view>
					<view class="current-price">
						<view class="current-icon">￥</view>
						<view class="current-value">{{item.dayRent_new}}</view>
					</view>
				</view>
			</view>
			<view class="title">
				{{item.extension_title}}
			</view>
			<view class="attribute">
				<view class="i" :class="ele.color" v-for="(ele,index) in getLabel(item.rent_label)" :key="index">
					{{ele.title}}
				</view>
			</view>
			<view class="now-price">
				<text class="icon">￥</text>
				<text class="yuan">{{getPrice(item.min_price,0)}}.</text>
				<text class="corner">{{getPrice(item.min_price,1)}}/天</text>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		name: "GoodsList",
		props: {
			goods: {
				type: Array,
				default: [],
			},
		},
		methods: {
			handleGoodsDetail(item) {
				uni.navigateTo({
					url: `/pagesA/productDetails/productDetails?goods_id=${ item.goods_id }`
				})
			},
			getImg(url) {
				return this.$imgURL2 + url;
			},
			getPrice(price, index) {
				const priceArray = String(price).split(".");
				return priceArray[index];
			},
			getLabel(string) {
				const labelData = [];
				string.split(",").forEach(item => {
					const obj = {
						title: item,
					}
					if (item === "包邮") {
						obj.color = "green"
					} else {
						obj.color = "red"
					}
					labelData.push(obj);
				})
				return labelData;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.waterfall {
		display: flex;
		flex-wrap: wrap;
		padding: 0 12px;

		.noPadding {
			padding: 0;
		}

		.item {
			width: 330rpx;
			// height: 532rpx;
			border-radius: 16rpx;
			box-sizing: border-box;
			position: relative;
			background-color: white;
			padding: 20rpx 24rpx;
			box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.1);
			overflow: hidden;
			margin-bottom: 32rpx;

			&:nth-of-type(odd) {
				margin-right: 42rpx;
			}

			.big-tag {
				width: 278rpx;
				height: 72rpx;
			}

			.new {
				position: absolute;
				top: 0;
				left: -5rpx;
				width: 84.85rpx;
				height: 86.37rpx;
				z-index: 10;
			}

			.img {
				width: 216rpx;
				margin-left: 50%;
				transform: translateX(-50%);
			}

			.activity {
				height: 50rpx;
				position: relative;

				&.active {
					opacity: 0;
					z-index: -9999;
				}

				.line {
					background-color: #DB211F;
					border-radius: 10rpx;
					height: 45rpx;
					display: flex;
					align-items: center;

					.daily {
						width: 80rpx;
						height: 45rpx;
						border-radius: 10rpx;
						background-color: #7600ED;
						color: white;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 16rpx;
					}

					.discount {
						font-size: 16rpx;
						color: #FEFFED;
						margin-left: 8rpx;
					}
				}

				.current {
					position: absolute;
					width: 120rpx;
					height: 72rpx;
					bottom: 2rpx;
					right: -6rpx;
					background-image: url("@/static/index/cuurent-price.png");
					background-repeat: no-repeat;
					background-size: cover;
					color: white;
					padding-left: 36rpx;
					box-sizing: border-box;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.current-title {
						font-size: 10rpx;
						line-height: 1;
						margin-top: 5rpx;
						transform: scale(.8);
					}

					.current-price {
						display: flex;
						align-items: baseline;
						margin-top: 5rpx;

						.current-icon {
							font-size: 10rpx;
							transform: scale(.8);
						}

						.current-value {
							line-height: 1;
							font-size: 24rpx;
						}
					}
				}
			}

			.title {
				font-size: 24rpx;
				-webkit-line-clamp: 2;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.attribute {
				margin-top: 8rpx;
				font-size: 20rpx;
				display: flex;
				flex-wrap: wrap;

				.i {
					border-radius: 8rpx;
					height: 32rpx;
					margin-right: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					padding: 0rpx 5rpx;
					margin-bottom: 5px;
				}

				.red {
					color: #E43C3A;
					border: 1px solid #E43C3A;
				}

				.green {
					color: #1DB03C;
					border: 1px solid #1DB03C;
				}
			}

			.now-price {
				color: #E43C3A;
				white-space: nowrap;

				.icon {
					font-size: 16rpx;
				}

				.yuan {
					font-size: 28rpx;
				}

				.corner {
					font-size: 16rpx;
				}
			}
		}
	}
</style>
